﻿<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="UTF-8">
    <title>EasyUI linkbutton展示</title>
    <!-- EasyUI framework -->
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/icon.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/demo/demo.css">
    <script src="../js/easyui/1.3.2/jquery-1.8.0.min.js"></script>
    <script src="../js/easyui/1.3.2/jquery.easyui.min.js"></script>
  </head>

  <body>
    <h2>LinkButton</h2>
    <div class="demo-info">
      <div class="demo-tip icon-tip"></div>
      <span style="font-size:1.6em">可以建立超連結&lt;a/&gt標籤為基礎的按鈕。</span>
    </div>
    <div style="margin:10px 0;"></div>
    <table>
      <caption style="text-align:left"><strong>EasyUI 1.3.2 可用圖示一覽表</strong></caption>
      <tbody>
        <tr>
          <td>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSwitchClick()">切換提示</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-blank'">空白</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">編輯</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">移除</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">儲存</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪下</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">好的</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">不要</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重讀</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜尋</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">列印</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">幫助</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">復原</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">取消復原</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返回</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-sum'">加總</a>
            <a id="iconTip" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip',disabled:true">提示不給用</a>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <table>
      <caption style="text-align:left"><strong>迷你圖示</strong></caption>
      <tbody>
        <tr>
          <td>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">新增</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-edit'">編輯</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-refresh'">重新整理</a>
          </td>
        </tr>
      </tbody>
    </table>
  <script>
    function onSwitchClick(){
      var iconTip = $("#iconTip");
      if (iconTip.linkbutton("options").disabled)
        iconTip.linkbutton("enable");
      else
        iconTip.linkbutton("disable");
    }
  </script>
  </body>
</html>

